$(function () {
  // 文章的发布状态
  let state = '已发布'
  
  // 点击'草稿'按钮
  $('.btn_cg').on('click', function () {
    state = '草稿'
  })
  // 点击'发布'按钮
  $('.btn_pub').on('click', function () {
    state = '已发布'
  })

  // 定义校验规则
  layui.form.verify({
    // 正则中的.表示匹配任意的字符(中文,英文,数字,字符)
    title:[/^.{1,30}$/,'标题必须是1-30位的字符']
  })

  // console.log('ok');
  function Category() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
        // 创建一个空数组
        let art_li = []
        // 循环遍历拿到文章类别中请求回来的值
        res.data.forEach(function (item) {
          // console.log(item);
          art_li.push(`
          <option value="${item.id}">${item.cate_name}</option>
          `)
        })
        $('[name="cate_id"]').append(art_li)
        // 告诉layui,富文本编辑器中的select不需要被美化
        $('.ql-toolbar select').attr('lay-ignore','')
        // 如果表单中元素是动态追加的,则需要调用form.render重新渲染,否则追加的内容无法被展示出来
        layui.form.render('select')
        // 当render完毕之后,把富文本编辑器(Quill)中的下拉菜单隐藏
        $('.ql-toolbar select').hide()
      }
      })    
  }
  Category()
  
  var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction
  
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean']                                         // remove formatting button
  ];
  // 渲染富文本框
  var quill = new Quill('#editor', {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow'
      });

  // 点击选择封面触发点击
  $('.btn-choose-img').on('click', function () {
    // 模拟点击行为
    $('#file').click()
  })

  // 监听file的change事件
  let pic = null
  $('#file').on('change', function (e) {
    // 获取图片
    // console.dir(e.target.files);
    let files = e.target.files
    // console.log(files);
    // 判断用户是否选择文件
    if (files.length === 0) {
        return pic = null
    }
    pic = files[0]
    // 函数接收一个文件,返回值是这个文件的url地址
    let text = URL.createObjectURL(files[0])
      // 将文件地址放到img标签中
    $('#image').prop('src',text)

  })

   // // 监听form表单的submit事件
  $('.form-pub').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault()

    if (!pic) {
      return layer.msg('请选择封面后在发布文章')
    }
    // 准备FormData格式的请求体
    // 创建一个空白的FormData()对象,里面没有包含任何数据
    const fd = new FormData()
    // 向空白的FormData中追加键值对数据
    fd.append('title', $('[name="title"]').val())
    fd.append('cate_id', $('[name="cate_id"]').val())
    fd.append('content', quill.root.innerHTML)
    fd.append('state', state)
    fd.append('cover_img', pic)
    // console.log(quill.root.innerHTML);

    
    // 使用axios发起请求,调用发布文章的接口
    axios.post('/my/article/add',fd).then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
      // 页面跳转
        location.href = '/article/art_lists.html'
        // 实现高亮切换显示
        window.parent.highlight('文章列表')
      }
    })
  })




  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  // 封装获取文章分类列表
  // function Category() {
  //   axios.get('/my/cate/list').then(({ data: res }) => {
  //     // console.log(res);
  //     if (res.code == 0) {
  //       // 创建一个空数组
  //       let ary = []
  //       // 循环遍历请求回来的列表
  //       res.data.forEach(function (item) {
  //         // console.log(item);
  //         ary.push(`
  //         <option value="${item.id}">${item.cate_name}</option>
  //         `)
  //       })
  //       $('[name="cate_id"]').append(ary)
  //       // 阻止layui对富文本框美化
  //       $('.ql-toolbar select').attr('lay-ignore', '')
  //       //刷新select选择框渲染
  //       layui.form.render('select'); 
  //       // 隐藏下拉菜单
  //       $('.ql-toolbar select').hide()
  //     }
  //   })
  // }
  // // 调用
  // Category()

  // 渲染富文本框
  // var toolbarOptions = [
  //   ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
  //   ['blockquote', 'code-block'],
  
  //   [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  //   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  //   [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  //   [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  //   [{ 'direction': 'rtl' }],                         // text direction
  
  //   [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
  //   [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  //   [{ 'font': [] }],
  //   [{ 'align': [] }],
  
  //   ['clean']                                         // remove formatting button
  // ];

  // var quill = new Quill('#editor', {
  //   modules: {
  //     toolbar: toolbarOptions
  //   },
  //   theme: 'snow'
  // });


  // // 点击选择封面触发点击
  // $('.btn-choose-img').on('click', function () {
  //   // 模拟点击行为
  //   $('#file').click()
  // })

  // // 监听file的change事件
  // let pic = null
  // $('#file').on('change', function (e) {
  //   // 获取图片
  //   // console.dir(e.target.files);
  //   let files = e.target.files
  //   console.log(files);
  //   // 判断用户是否选择文件
  //   if (files.length === 0) {
  //       return
  //   }
  //   pic = files[0]
  //   // 函数接收一个文件,返回值是这个文件的url地址
  //   let text = URL.createObjectURL(files[0])
  //     // 将文件地址放到img标签中
  //   $('#image').prop('src',text)

  // })
  // // $('.ql-editor').attr('name','content')
  // // 定义一个变量表示可选值为已发布
  // let art_state = '已发布';
  // // 给发布草稿按钮注册点击事件
  // $('.btn_cg').on('click', function () {
  //   // 点击发布草稿变量值变为草稿
  //   art_state = '草稿';
  // })
  // // 监听form表单的submit事件
  // $('.form-pub').on('submit', function (e) {
  //   // 阻止默认行为
  //   e.preventDefault()
  //   // 创建一个空白的FormData()对象,里面没有包含任何数据
  //   const fd = new FormData()
  //   // 向空白的FormData中追加键值对数据
  //   fd.append('title', $('[name="title"]').val())
  //   fd.append('cate_id', $('[name="cate_id"]').val())
  //   fd.append('content', $('.ql-editor').text())
  //   fd.append('state', art_state)
  //   fd.append('cover_img', pic)
  //   // fd.forEach(function (item) {
  //   //   console.log(item);
  //   // })
  //   axios.post('/my/article/add',fd).then(({ data: res }) => {
  //     // console.log(res);
  //     if (res.code == 0) {
  //       layer.msg('发布文章成功', {icon: 6}); 
  //     // 页面跳转
  //       location.href = '/article/art_lists.html'
  //     }
  //   })
  // })

})